<template>
  <div class="phone_btn_container">
    <div class="phone_btn">
      <template v-if="props.shwoType == 'top'">
        <!-- <el-popover trigger="hover" placement="left" :width="160">
          <div class="dropdown">
            <div class="dropdown_item">
              <div class="dropdown_item_name">写新图文</div>
            </div>
            <div class="dropdown_item">
              <div class="dropdown_item_name yiyoutuwen">选择已有图文</div>
            </div>
            <div class="dropdown_item">
              <div class="dropdown_item_name video">视频消息</div>
            </div>
            <div class="dropdown_item">
              <div class="dropdown_item_name audio">音频消息</div>
            </div>
            <div class="dropdown_item">
              <div class="dropdown_item_name img">图片消息</div>
            </div>
          </div>
          <div style="text-align: right; margin: 0">
            <el-button size="small" text @click="visible = false">取消</el-button>
            <el-button size="small" type="primary" @click="handle('tihuan')">确定</el-button>
          </div>
          <template #reference>
            <el-icon :class="show ? 'active' : ''" @click="onSwitch">
              <Switch />
            </el-icon>
          </template>
        </el-popover> -->

        <el-icon @click="handle('bottom')">
          <Bottom />
        </el-icon>
      </template>
      <template v-if="props.shwoType == 'center'">
        <el-icon @click="handle('top')">
          <Top />
        </el-icon>
        <el-icon @click="handle('bottom')">
          <Bottom />
        </el-icon>
        <el-popover v-if="props.isDelete" v-model:visible="visible" placement="left" :width="160">
          <p style="margin-bottom: 10px">确定要删除此篇内容?</p>
          <div style="text-align: right; margin: 0">
            <el-button size="small" text @click="visible = false">取消</el-button>
            <el-button size="small" type="primary" @click="handle('del')">确定</el-button>
          </div>
          <template #reference>
            <el-icon @click="onDel">
              <Delete />
            </el-icon>
          </template>
        </el-popover>
      </template>
      <template v-if="props.shwoType == 'bottom'">
        <el-icon @click="handle('top')">
          <Top />
        </el-icon>
        <el-popover v-if="props.isDelete" v-model:visible="visible" placement="left" :width="160">
          <p style="margin-bottom: 10px">确定要删除此篇内容?</p>
          <div style="text-align: right; margin: 0">
            <el-button size="small" text @click="visible = false">取消</el-button>
            <el-button size="small" type="primary" @click="handle('del')">确定</el-button>
          </div>
          <template #reference>
            <el-icon @click="onDel">
              <Delete />
            </el-icon>
          </template>
        </el-popover>
      </template>
    </div>
    <!-- <div class="right"> </div> -->
  </div>
</template>

<script setup lang="ts">
  import bus from '@/utils/bus'
  import { ref } from 'vue'
  const props = defineProps({
    shwoType: {
      type: String,
      default: 'top'
    },
    isDelete: {
      type: Boolean,
      default: true
    }
  })
  // const active = ref(-1)
  const show = ref(false)
  const visible = ref(false)
  const handle = (type: string) => {
    console.log('handle')
    visible.value = false
    bus.emit('phoneBtn', type)
  }
  const onDel = () => {
    visible.value = true
  }
  const onSwitch = () => {}
</script>

<style scoped lang="scss">
  .phone_btn_container {
    display: flex;
    align-items: flex-start;

    .phone_btn {
      padding: 15px 7px;
      display: grid;
      grid-template-columns: 1fr;
      grid-row-gap: 10px;
      align-items: center;
      justify-items: center;
      text-align: center;
      margin: 0 10px;
      background-color: #fff;
      box-shadow: 0 1px 6px 0 #e4e8eb;
      border-radius: 25px;
      margin-bottom: 3px;

      .el-icon {
        width: 34px;
        height: 34px;
        
        border-radius: 50%;
        display: grid;
        place-items: center;

        &:hover {
          cursor: pointer;
          background: #ededed;
        }
      }
    }

    .active {
      background: #ededed;
    }

    .right {
      width: 145px;
      position: relative;
    }
  }
  .dropdown {
    border-radius: 2px;
    font-size: 14px;
    background: #fff;
    margin-bottom: 10px;

    .dropdown_item {
      padding: 0 15px 0 20px;
      line-height: 40px;
      display: flex;
      cursor: pointer;

      &:hover {
        background: #fdf1ee;
        color: #ed742e;
      }

      .dropdown_item_name {
        display: flex;
        align-items: center;

        &::before {
          content: '';
          display: inline-block;
          width: 16px;
          height: 16px;
          background: url('@/assets/content/channelFootage/officialaccountgraphics/xintuwen.png') no-repeat;
          background-size: 100% 100%;
          margin-right: 5px;
        }

        &:hover::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/xintuwen_active.png') no-repeat;
        }
      }

      .yiyoutuwen {
        &::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/yiyoutuwen.png') no-repeat;
        }

        &:hover::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/yiyoutuwen_active.png') no-repeat;
        }
      }

      .text {
        &::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/text.png') no-repeat;
        }

        &:hover::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/text_active.png') no-repeat;
        }
      }

      .video {
        &::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/video.png') no-repeat;
        }

        &:hover::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/video_active.png') no-repeat;
        }
      }

      .audio {
        &::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/audio.png') no-repeat;
        }

        &:hover::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/audio_active.png') no-repeat;
        }
      }

      .img {
        &::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/img.png') no-repeat;
        }

        &:hover::before {
          background: url('@/assets/content/channelFootage/officialaccountgraphics/img_active.png') no-repeat;
        }
      }
    }
  }
</style>
